<template>
    <div 
        v-loading="loading.value"
        :element-loading-svg="svg"
        class="custom-loading-svg"
        element-loading-svg-view-box="-10, -10, 60, 60">
        <el-upload

            class="upload-demo"
            drag
            method="post"
            action="/v1/pdf2doc"
            multiple
            :on-change="handleChange"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-exceed="handleExceed"
            :on-success="handleSuceess"
            :before-upload="beforeUpload"
        >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
               拖动pdf文件到此处开始转换 <em>点击上传</em>
            </div>
            <template #tip>
                <div class="el-upload__tip">
                    上传文件类型为pdf
                </div>
            </template>
      </el-upload>
    </div>
    <div v-if="doc_list.length > 0" >
        <div v-for="item in doc_list" :key=item.name >
            <el-button size="mini" type="primary" @click="downloadfile(item)">下载 {{item.name}}</el-button>
        </div>
    </div>
    <div v-else>
        <div v-for="item in doc_list" :key=item.name >
            <el-button size="mini" type="primary" @click="downloadfile(item)">下载 {{item.name}}</el-button>
        </div>
        
    </div>
</template>

<script setup lang="ts">
import { reactive,ref,defineComponent} from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
const loading = ref(false)
const uploadRef = ref<UploadInstance>()
const doc_remote_url = ref("")
const doc_name = ref("")
const doc_list = ref([])
const submitUpload = () => {
  uploadRef.value!.submit()
}


const svg = `
    <path class="path" d="
      M 30 15
      L 28 17
      M 25.61 25.61
      A 15 15, 0, 0, 1, 15 30
      A 15 15, 0, 1, 1, 27.99 7.5
      L 15 15
    " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
  `
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}



const handleChange: UploadProps['onChange'] = (file, uploadFiles) => {
    // console.log(file, uploadFiles)
    // loading.value = true
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log(uploadFile)
}




function downloadfile(item)
{
    console.log('downloadfile');
    var alink = document.createElement("a");
    alink.href = item.url;
    alink.download = item.name; //图片名
    alink.click();

}


const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
    console.log('onExceed')
    ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    console.log("beforeRemove")
    return true
    // return ElMessageBox.confirm(
    // `Cancel the transfer of ${uploadFile.name} ?`
    // ).then(
    //     () => true,
    //     () => false
    // )
}

const beforeUpload: UploadProps['beforeUpload'] = (uploadFile, uploadFiles) => {
    console.log("beforeUpload")
    loading.value = true
    return true
    // return ElMessageBox.confirm(
    // `Cancel the transfer of ${uploadFile.name} ?`
    // ).then(
    //     () => true,
    //     () => false
    // )
}

const handleSuceess: UploadProps[] = (response, uploadFile, uploadFiles) => {
    console.log("上传成功",response, uploadFile, uploadFiles);
    loading.value = false
    console.log(loading)
    if (response.code == 200){
        doc_remote_url.value = response.data.url
        doc_name.value = response.data.name
        doc_list.value.push(response.data)
        ElMessage({
            message: '转换成功',
            type: 'success',
        })

    }else{
        ElMessage({
            message: '转换失败 '+response.msg,
            type: 'error',
        })
    }
    // console.log(uploadFile);
    // console.log(uploadFiles);
    
}
</script>
